<template>
  <!-- 零星采购计划-变更新增 -->
  <div class="e-form">
     <BillTop title="零星采购计划变更新增" @cancel="cancel"></BillTop>
    <div class="tabs">
      <div class="tabs-title">基本信息</div>
      <div style="width: 100%" class="form">
        <el-form :model="formData" label-width="150px" :rules="rules"
          ref="formData"
          class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
               <el-form-item label="单据机构：">
                {{ formData.orgName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="计划年度：">
                {{formData.year}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划月份：">
                {{formData.month}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
             <el-form-item label="要签合同">
                          {{ formData.isSignContract === true ? '是' : '否'  }}
                        </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
               <el-form-item label="变更日期：" prop="planDate">
                  <el-date-picker
                  v-model="formData.planDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                 <el-form-item label="原计划金额(元)：">
                {{formData.totalAmount}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="不含税计划金额(元)">
                {{formData.amount}}
              </el-form-item>
            </el-col> -->
            <el-col :span="12">

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
               <el-form-item label="税率%：" prop="taxRateChanged">
                <el-input
                  placeholder="请填写"
                  v-model="formData.taxRateChanged"
                  @blur="taxRateChangedblur"
                    clearable
                             v-enter-float="{
                                    set: this,
                                    val: 'formData',
                                    key: 'taxRateChanged'
                                }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
                 <el-form-item label="税额：" prop="taxAmountChanged">
                <el-input
                  placeholder="请填写"
                  v-model="formData.taxAmountChanged"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
               <el-form-item label="填报人：" v-model="formData.preparer">
                {{formData.preparer}}
              </el-form-item>
              <!-- <el-form-item label="变更后计划金额(元)">
                {{formData.totalAmountChanged}}
              </el-form-item> -->
            </el-col>
            <el-col :span="12">
                 <el-form-item label="币种：">
                    {{formData.currency}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
                <el-form-item label="状态：">
                {{['草稿','审核中','已审核','已关闭','已作废'][formData.state]}}
              </el-form-item>
            </el-col>
            <el-col :span="12">

            </el-col>
          </el-row>
          <el-row>
            <!-- <el-form-item label="变更期数">
                {{formData.period}}
               </el-form-item> -->
          </el-row>
          <el-row>
            <el-form-item label="备注：">
               <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.remarks"
              >
              </el-input>
            </el-form-item>
          </el-row>

          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="本位币">
                {{formData.baseCurName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="本位币汇率">
                {{formData.baseCurRate}}
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <!-- <el-form-item label="计划金额（本位币）">
              {{formData.baseCurTotalAmount}}
            </el-form-item> -->
          </el-row>
          <!-- <el-row>
            <el-form-item label="作废人">
              {{ formData.nullifyCreator }}
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="作废原因">
                {{ formData.nullifyReason }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作废说明">
                {{ formData.nullifyDescription }}
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
      </div>
    </div>
    <div class="buttons">
       <span class="tip"
        ><span style="color: red; margin-right: 0">*</span>为必填项</span
      >
      <el-button type="primary" style="background: #2e61d7" @click="save('formData')"
        >保存</el-button
      >

      <el-button @click="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import { mapMutations, mapState } from 'vuex'
import requests from '@/api/materials/sporadicPurchase.js'

export default {
    data () {
        return {
            //表单数据
            formData: {
                'amount': null,
                'amountChanged': null,
                'baseCurAmount': null,
                'baseCurAmountChanged': null,
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': null,
                'baseCurTaxAmount': null,
                'baseCurTaxAmountChanged': null,
                'baseCurTotalAmount': null,
                'baseCurTotalAmountChanged': null,
                'billId': '',
                'billNo': '',
                'currency': '',
                'currencyId': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'isSignContract': false,
                'month': null,
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'period': null,
                'planDate': '',
                'preparer': '',
                'preparerId': '',
                'remarks': '',
                'rmbAmount': null,
                'rmbAmountChanged': null,
                'rmbId': '',
                'rmbName': '',
                'rmbRate': null,
                'rmbTaxAmount': null,
                'rmbTaxAmountChanged': null,
                'rmbTotalAmount': null,
                'rmbTotalAmountChanged': null,
                'sporadicPurchasePlanBillId': '',
                'sporadicPurchasePlanBillNo': '',
                'state': '',
                'taxAmount': null,
                'taxAmountChanged': null,
                'taxRate': null,
                'taxRateChanged': null,
                'totalAmount': null,
                'totalAmountChanged': null,
                'workId': '',
                'year': null
            },
            moneyList: [], //币种
            orgId: '', //机构id
            orgName: '', //机构名称
            billid: '',
            isSkip: false, //是否跳转
            //验证
            rules: {
                planDate: [
                    { required: true, message: '请选择变更日期', trigger: 'change' },
                ],
                taxRateChanged: [{ required: true, message: '请填写税率', trigger: 'change' }],
                taxAmountChanged: [
                    { required: true, message: '请填写税额', trigger: 'change' },
                ],
            },
        }
    },
    computed: {
        ...mapState({
            options: state => state.contract.ctClassify,
            popConfirm: 'popConfirm',
            popStatus: 'popStatus',
        }),
        localPopConfirm () {
            if (this.popConfirm) {
                switch (this.popStatus) {
                case 'prompt':
                    this.delData()
                    break
                case 'success':
                    if (this.isSkip) this.handleClose()
                    break
                }
                this.setPopConfirm(false)
            }
            return this.popConfirm
        },
    },
    components: {},
    created () {
        let data = JSON.parse(localStorage.getItem('vuex'))
        this.orgId = data.userInfo.orgInfo.orgId
        this.orgName = data.userInfo.orgInfo.orgName
        this.billid = this.$route.query.billid
        this.formData.preparer = localStorage.getItem('userName')
        this.getData()
    },
    mounted () {},
    beforeDestroy () {},
    methods: {
        ...mapMutations(['setPopConfirm']),
        //计算税额
        taxRateChangedblur () {
            this.formData.taxAmountChanged =  (this.formData.amount * this.formData.taxRateChanged) / 100
            this.formData.taxAmountChanged = this.formData.taxAmountChanged.toFixed(2)

        },

        // 初始化变更单
        getData () {
            this.$Ajax
                .httpGet({
                    url: '/material/sporadicPurchasePlanChanged/initBaseData',
                    params: {
                        id: this.billid,
                    },
                })
                .then(res => {
                    this.formData = res
                })
        },

        //保存
        save (formName) {

            this.$refs[formName].validate(valid => {
                if (valid) {
                    requests.AddSporadicPurchaseChanged(this.formData).then(res => {
                        this.clientPop('suc', '保存成功,是否继续', ()=>{
                            this.$router.replace({
                                path: '/sporadicPurchaseChangeEdit',
                                query: {
                                    billid: res,
                                    name: 'goodsAndMaterials'
                                }
                            })
                        }, this.cancel)

                    })
                } else {
                    return false
                }
            })

        },
        //提交
        submit () {

        },
        //取消按钮
        cancel () {
            this.$router.replace('/sporadicPurchase')
        },
    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;
  }
}

.e-table {
  background: #fff;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>
